<style lang="scss" scoped>
	.particle {
		height: 100%;
		@include n-col1;
		align-items: stretch;
		
		.particle-list{
			height: 0;
			flex: 1;
			display: grid;
			
			grid-template-columns: repeat(auto-fill,minmax(120px,1fr));
			grid-auto-rows: max-content;
			gap:20px;
			>li{
				border-radius: 10px;
				overflow: hidden;
				min-width: 0;
				min-height: 0;
				background: $theme-bg-white1;
				>img{
					object-fit: cover;
					height: 120px;
					border-radius: 10px 10px 0 0;
					width: 100%;
					background:  $theme-bg-white4;
				}
				>h3{
					padding: 0 15px;
					margin-top: 15px;
					line-height: 1.6;
					height: 50px;
					font-size: 16px;
					color: $theme-text3;
				}
				>footer{
					@include n-row1;
					padding: 15px;
					color: $theme-text5;
					gap:10px;
					padding-top: 10px;
					font-size: 15px;
					>span{
						@include n-row1;
						gap:10px;
						>img{
							width: 30px;
							height: 30px;
							object-fit: cover;
							border-radius: 50%;
						}
					}
					>em{
						cursor: pointer;
						@include n-row3;
						margin-left: auto;
						gap:5px;
						>i{
							font-size: 19px;
						}
					}
				}
			}
		}
		
		
		
	}
</style>
<style lang="scss">
	.particle-view{
		overflow: hidden;
		>h2{
			color: $theme-text2;
			line-height: 1.6;
			font-size: 24px;
			margin-top: 30px;
		}
		>article{
			margin-top: 20px;
			line-height: 1.6;
			font-size: 15px;
			color: $theme-text3;
		}
	}
</style>

<template>

	<div class="n-page particle" v-loading="loading">
		<h1 class="n-page-h1"><em>{{ $route.meta.title }}</em>
<!--      <el-button icon="el-icon-plus" type="primary" @click="add">新增文章</el-button>-->
    </h1>
		<ul class="particle-list">
			 
			<li v-for="item,idx in list" :key="idx" @click="see(item)">
				<img :src="$conf.env.baseUrl + item.featured_image" />
				<h3>{{item.title}}</h3>
<!--        /media/uploads/df5d83f9-80c1-4c1b-9449-13c8cc0cf27b-15I0c26435310-413J.jpg-->
<!--        ["/media/uploads/5880abc6-0507-4977-8da7-e577bfc89936-15I0c263G60-26058.jpg"]-->
<!--				<footer>-->
<!--					<span><img src="../assets/img/8.png" />{{item.excerpt}}</span>-->
<!--					<em><i class="fa fa-heart-o"></i>{{item.views || 0}}</em>-->
<!--				</footer>-->
			</li>
			 
		</ul>
		<n-handle class="n-page-dialog" :conf="handleConf.props" ref="handle" :compList="handleConf.compList" :btns="handleConf.btns"  @ok="handle"  :form="handleConf.form" />
		<n-handle class="n-page-dialog" :conf="detailConf.props" ref="detail" :compList="detailConf.compList" >
			<template #view>
				<div class="particle-view">
					<el-carousel height="300px">
						<el-carousel-item v-for="item in detailConf.form.news_banner" :key="item"><img :src="$conf.env.baseUrl + item" /></el-carousel-item>
					</el-carousel>
					<h2>{{detailConf.form.title}}</h2>
					<article v-html="detailConf.form.content"></article>
				</div>
				
			</template>
		</n-handle>
		
		
	</div>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				loading:false,
				params:{
					count:1,
					_total:0,
				},
				detailConf:{
					props:{title: '', type:'dialog', size:'600px'},
					form:{
						news_banner:[],
					},
					compList:[{type:'slot',slotName:'view'}]
				},
				handleConf:{
					props:{title: '添加文章', type:'dialog', size:'600px'},
					form:{
						title:'',
						content:'',
						excerpt:'',
						status:1,
						featured_image:'',
						news_banner:[],
						is_featured:1,
						views:10,
						 
						
					},
					compList:[
					
						{type: 'text', label: '标题', required:true, k: 'title'},
						{type: 'text', label: '摘要', required:true, k: 'excerpt'},
						// {type: 'text', label: '状态', required:true, k: 'status'},
						
						{
							type: 'upload', label: '封面图', required:true, k: 'news_banner', types:['png','jpg','jpeg','webp'], multiple:1,
							onUpload: async ({tg,conf,vm,files})=>{
								
								for(const file of files){
									const item = { prog:0, type: 'img', path:'', name: file.name };
									conf.files.push(item)
									
									const form = new FormData();
									form.set('file',file)
									const reqConf = this.$api.user.upload(form,  )
									reqConf.bindEv('progressUpload',  ({loaded,total}) => item.prog = ~~(loaded / total * 100))
									
									this._req(reqConf.content).then(res=>{
										if (!res) return ( item.err = vm.$t('该文件上传失败'));
										item.path = this.$conf.env.baseUrl + res.file.filePath;
										item.path2 = res.file.filePath;
										this.handleConf.form.featured_image = conf.files[0] && conf.files[0].path2 || '';
										this.handleConf.form[conf.k] = conf.files.slice(1).map(v=>v.path2)
									})
									
									
								}
								
							},
						},
						
						
						{
							type: 'rich-text', label: '内容', k: 'content',  required: true,
							compList:[ 'b','u','i','s','alignLeft','alignCenter','alignRight','subScript','superScript','font','fontSize','lineHeight','color','fontBg','format','clear','margin','padding','bg','border','hr','link','table' ]
						},
						
						
					],
					btns:[
						{ label: '确定添加', props:{type: 'primary'}, evKey: 'ok' },
					],
				},
				
			}
		},
		mounted() {
			this.getData();
		},
		methods: {
			async see(row){
				const {props} = this.detailConf;
				const res = await this._req(this.$api.article.readArticle({id:row.id}));
				if(!res) return;
				res.data.featured_image && res.data.news_banner.push(res.data.featured_image)
				this.detailConf.form = res.data;
				props.show = true;
				props.title = res.data.title;
			},
			
			async getData(){
				const res = await this._req(this.$api.article.getArticle(this.params));
				if(!res) return;
				this.list = res.results;
			},
			add(){
				const {handleConf} = this;
				handleConf.form = {
					title:'',
					content:'',
					excerpt:'',
					status:'1',
					featured_image:'',
					news_banner:[],
					is_featured:'1',
					views:10,
				}
				handleConf.compList.forEach(v=>v.type === 'upload' && (v.files = []))
				handleConf.props.show = true;
			},
			async handle(opt){
				const { handleConf:{props,form } } = this;
				if(!this.$refs.handle.verif()) return;
				const res = await this._req(this.$api.article.createArticle(form),props);
				if(!res)return;
				this.$msg();
				this.getData();
				props.show = false;
			},
		}
	}
</script>
